import { Link, RepoLink } from '@brillout/docpress'
import { UiFrameworkExtension } from '../../components'

The following shows how to add SSR / <Link href="/pre-rendering">pre-rendering (aka SSG)</Link> to an existing [Vite](https://vitejs.dev) app:
 - [Example of adding SSR/SSG to a Vite + React app](https://github.com/brillout/vite-to-vike)
 - [Example of adding SSR/SSG to a Vite + Vue app](https://github.com/brillout/vite-to-vike/tree/vue)

It showcases how to do so in a step-by-step, progressive, and customizable fashion:
- Choose between SSR and pre-rendering (SSG).
- With or without <UiFrameworkExtension name list={['vike-react', 'vike-vue']} />.
- With [Server Routing](https://vike.dev/server-routing) or [Client Routing](https://vike.dev/client-routing).
- Progressively migrate towards the stack you (eventually) want.

You can choose whether you want to migrate towards a full-fledged SSR/SSG framework DX (like Next.js and Nuxt by using <UiFrameworkExtension name />), or add a minimal SSR/SSG implementation (applying a minimal amount of changes to your existing code), or something in-between.

This way, you can move quickly while progressively choosing your stack as you go.

On a high-level, this is how you add Vike to your existing Vite app:

1. Add Vike to your `vite.config.js`.

   - Example: <RepoLink path="/boilerplates/boilerplate-react/vite.config.js" />

2. Either:
   - Enable pre-rendering, or
     > See <Link href="/pre-rendering" />
   - add a <Link href="/express">Express.js</Link>/<Link href="/hono">Hono</Link>/<Link href="/fastify">Fastify</Link>/<Link href="/server">...</Link> server (or add <Link href="/renderPage">Vike's server middleware</Link> if you already have one).
     > Example: <RepoLink path="/boilerplates/boilerplate-react/server/index.js" />

3. Either:
   - Use <UiFrameworkExtension name />, or
   - define <Link href="/onAfterRenderClient">`+onRenderClient.js`</Link> and <Link href="/onRenderHtml">`+onRenderHtml.js`</Link>.
     > Examples:
     > - <RepoLink text="Vue" path="/boilerplates/boilerplate-vue/renderer/" />
     > - <RepoLink text="Vue + TypeScript" path="/boilerplates/boilerplate-vue-ts/renderer/" />
     > - <RepoLink text="React" path="/boilerplates/boilerplate-react/renderer/" />
     > - <RepoLink text="React + TypeScript" path="/boilerplates/boilerplate-react-ts/renderer/" />

4. Create your first <Link href="/Page">`+Page.js`</Link> file.
   > Examples:
   > - <RepoLink text="Vue" path="/boilerplates/boilerplate-vue/pages/index/+Page.vue" />
   > - <RepoLink text="Vue + TypeScript" path="/boilerplates/boilerplate-vue-ts/pages/index/+Page.vue" />
   > - <RepoLink text="React" path="/boilerplates/boilerplate-react/pages/index/+Page.jsx" />
   > - <RepoLink text="React + TypeScript" path="/boilerplates/boilerplate-react-ts/pages/index/+Page.tsx" />


## See also

- <Link href="/new" />
- [GitHub > `vikejs/vike` > `boilerplates/`](https://github.com/vikejs/vike/tree/main/boilerplates)
- [GitHub > `vikejs/vike` > `examples/react-minimal`](https://github.com/vikejs/vike/tree/main/examples/react-minimal)
- [GitHub > `vikejs/vike` > `examples/react-full`](https://github.com/vikejs/vike/tree/main/examples/react-full)
- [GitHub > `vikejs/vike` > `examples/vue-minimal`](https://github.com/vikejs/vike/tree/main/examples/vue-minimal)
- [GitHub > `vikejs/vike` > `examples/vue-full`](https://github.com/vikejs/vike/tree/main/examples/vue-full)
